

<!-- 交易明细 -->
<template>
	<view class="content">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="交易明细" colorTheme="black">
			</navHeader>
		</view>
		
		<view v-if="messages && messages.length" class="all_blocks">
			<view class="block" v-for="item of messages" :key="item.id" @click="test(item)">
				<view class="left">
					<view class="name ellipsis1">{{item.des}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="right">
					<view :class="item.ioFlag == 0?'price':'price2'">
						<text v-if="item.ioFlag == '0'">+</text>
						<text v-if="item.ioFlag == '1'">-</text>
						{{item.amount / 100}}
					</view>
				</view>
			</view>
		</view>
		<g-empty v-else></g-empty>
	</view>
</template>

<script>

	import {
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		computed:{
			...mapState(['hasLogin', 'imgSite']),
		},
		data() {
			return {
				icon: {
				},
				
				balanceType: "",
				messages:[],
				
				//分页相关
				pageNum: 1,
				pageSize: 10
			};
		},
		onLoad(options) {
			let that = this;
			// 账户类型
			let balanceType = '';
			if(options.type == 'jifen'){
				balanceType = '4';
			}else if(options.type == 'yue'){
				balanceType = '0';
			}else if(options.type == 'shuijuan'){
				balanceType = '10';
			}
			
			that.balanceType = balanceType;
			that.getPageList_fun();
		},
		methods: {
			
			test(item){
				console.log(item)
			},
			// 时间戳转换日期--补0--毫秒
			timestampToTime(timestamp) {
				var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() < 10 ?  '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
				var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
				var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
				var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
				return Y+M+D+h+m+s;
			},
			
			
			//分页数据
			getPageList_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/findAccountBalanceDetailByCustomerIdForApi',
					method: 'POST',
					data:{
						ioFlag: null,
						balanceType: "20",
						pageNum: that.pageNum,  //页码
						pageSize: that.pageSize //显示条数
					},
					success: function(res) {
						for(let i of res.data.response.results){
							i.time = that.timestampToTime(i.time);
						}
						if(that.pageNum-0 > 1){
							for(let i of res.data.response.results){
								that.messages.push(i);
							}
						}else {
							that.messages = res.data.response.results;
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page,
	.content {
		background: #F5F5F5;
		height: 100%;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	.all_blocks{
		margin-top: 20rpx;
		background-color: white;
		width: 100%;
		border-radius: 16rpx;
		padding-left: 30rpx;
		.block:last-child{
			border-bottom: none;
		}
		.block{
			border-bottom: 1rpx solid #eee;
			width: 690rpx;
			height: 141rpx;
			display: flex;
			align-items: center;
			.left{
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 50%;
				height: 100%;
				.name{
					color: #333333;
					font-size: 26rpx;
				}
				.time{
					color: #999999;
					font-size: 22rpx;
					margin-top: 20rpx;
				}
			}
			.right{
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				.price{
					text-align: right;
					color: #E01327;
					font-size: 34rpx;
					// font-weight: bold;
				}
				.price2{
					color: #000;
					font-size: 34rpx;
					// font-weight: bold;
				}
				.state{
					color: #333333;
					font-size: 20rpx;
					margin-top: 18rpx;
					text-align: right;
				}
				.state2{
					color: #ADADAD;
					font-size: 20rpx;
					margin-top: 18rpx;
					text-align: right;
				}
			}
		}
	}
</style>



